<script setup lang="ts">
import { ref, unref, watch } from 'vue'
import { ElInput, ElImage } from 'element-plus'
import { propTypes } from '@/utils/propTypes'

const props = defineProps({
  modelValue: propTypes.string.def('')
})

watch(
  () => props.modelValue,
  (val: string) => {
    if (val === unref(valueRef)) return
    valueRef.value = val
  }
)

const emit = defineEmits(['update:modelValue'])

// 输入框的值
const valueRef = ref(props.modelValue)

// 监听
watch(
  () => valueRef.value,
  (val: string) => {
    emit('update:modelValue', val)
  }
)
</script>

<template>
  <div class="flex w-[100%] h-[100%]">
    <ElInput v-model="valueRef" placeholder="验证码" style="width: 75%" clearable v-bind="$attrs" />
    <ElImage class="w-[25%] h-[38px] cursor-pointer" style="padding-left: 2px" />
  </div>
</template>

<style lang="less" scoped></style>
